<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        tr{

        }
    </style>
    <script>
        /**
         * 得到指定id对象
         * @param id 指定id
         * @returns {HTMLElement} html元素对象
         */
        function $(id){
            return document.getElementById(id);
        }

        function add(){
            //创建tr对象
            let trObj = document.createElement("tr");

            //设置tr标签中间的文本
            trObj.innerHTML="<td>"+$("code").value+"</td><td>"+$("name").value+"</td><td>"+$("salary").value+"</td>";
            trObj.onclick=function (){
                choose(this);
            }
            $("data").append(trObj);
        }
        window.onload= function (){
            let tbodyObj=$("data");
            let array = tbodyObj.getElementsByTagName("tr");
            for (let i = 0;i<array.length;i++){
                array[i].onclick= function (){
                    choose(this);
                }
            }
        }
        let closeObj;
        function choose(chooseObj){
            if (closeObj != null){
                closeObj.style.backgroundColor="white";
            }
            chooseObj.style.backgroundColor="green";
            closeObj=chooseObj;
            $("delButton").disabled=false;
            let tdObj = closeObj.getElementsByTagName("td");
            $("code").value=tdObj[0].innerHTML;
            $("name").value=tdObj[1].innerHTML;
            $("salary").value=tdObj[2].innerHTML;
        }
        function del(){
            // if (closeObj != null){
            //     //从父元素，移除子元素
            //     $("data").removeChild(closeObj);
            //     closeObj=null;
            // }else{
            //     alert("请选中删除行");
            // }
            //将该元素直接删除
            closeObj.remove();
            $("delButton").disabled=true;
            $("code").value=null;
            $("name").value=null;
            $("salary").value=null;
        }
        function update(){
            let tdObj = closeObj.getElementsByTagName("td");
            tdObj[0].innerHTML=$("code").value;
            tdObj[1].innerHTML=$("name").value;
            tdObj[2].innerHTML=$("salary").value;
        }
        function delAll(){
            // $("data").innerText="";
            let array= $("data").getElementsByTagName("tr");

            for (let i=0;i<array.length;i++){
                array[i--].remove();
            }
        }
    </script>
</head>
<body>
    <div style="height: 500px; display: flex; width: 700px;justify-content: space-between   ">
        <table border="1px" cellspacing="0" width="25%">
            <thead><tr><th>工号</th><th>姓名</th><th>工资</th></tr></thead>
            <tbody id="data">
                <tr><td>001</td><td>张三</td><td>6000</td></tr>
                <tr><td>002</td><td>李四</td><td>4000</td></tr>
                <tr><td>005</td><td>王五</td><td>3500</td></tr>
                <tr><td>003</td><td>赵六</td><td>4500</td></tr>
                <tr><td>009</td><td>吴七</td><td>9800</td></tr>
                <tr><td>021</td><td>龙八</td><td>7200</td></tr>
            </tbody>
        </table>
        <div style="width: 400px">
            工号：<input type="text" id="code"> <br>
            姓名：<input type="text" id="name"> <br>
            工资：<input type="text" id="salary"> <br><br>
            <input type="button" value="添加" onclick="add()"> &nbsp;&nbsp;&nbsp;
            <input type="button" value="修改" onclick="update()">&nbsp;&nbsp;&nbsp;
            <input type="button" value="删除" onclick="del()" id="delButton" disabled="true">
            <input type="button" value="清空所有" onclick="delAll()">
        </div>
    </div>
</body>
</html>